<template>
  <div>
    <div
      @click="!disabled ? $navigateTo(`/pages/goods/product/detail?skuId=${props.res.skuId}&goodsId=${props.res.goodsId}`) : emit('click', props.res)"
      goods-col overflow-hidden>
      <div flex flex-a-c flex-j-c>
        <image v-if="props.res.thumbnail" :src="props.res.thumbnail" @error="props.res.thumbnail = ''" w-340rpx h-340rpx
          rounded>
        </image>
        <div rounded v-else w-340rpx h-340rpx bg-color text-24rpx flex flex-a-c flex-j-c>图片已失效</div>
      </div>
      <div p-16rpx overflow-hidden flex flex-col flex-j-sb>
        <div>
          <div class="wes">
            {{ props.res.goodsName }}
          </div>
          <!-- 促销相关 -->
          <div text-24rpx text-main-color py-4rpx rounded-2rpx>
            <div v-if="props.res.salesModel === 'WHOLESALE'">
              <span>批</span>
            </div>
            <div v-for="(promotionItem, promotionIndex) in getPromotion(res)" :key="promotionIndex">
              <span mr-4rpx v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
              <span mr-4rpx v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
              <span mr-4rpx v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
            </div>
          </div>
          <div flex-col my-4rpx>
            <!-- 判断是否有积分 -->
            <div text-32rpx v-if="props.type === 'point' && props.res.points != undefined" font-bold text-main-color>
              {{ props.res.points }}积分
            </div>
            <!-- 没有积分展示原价 -->
            <div text-32rpx v-else font-bold text-main-color>
              {{ unitPrice(props.res.price, '￥') }}
            </div>
          </div>
          <div flex text-24rpx flex-j-sb color-warmGray>
            <div text-24rpx>已售：{{ props.res.buyCount || "0" }}</div>
            <div text-24rpx>{{ props.res.commentNum || "0" }}条评论</div>
          </div>
          <div text-24rpx mt-4rpx flex flex-a-c flex-j-sb color-warmGray>
            <div>
              <nut-tag v-if="props.res.selfOperated" mr-8rpx :custom-color='colors.themeColor'>自营</nut-tag>
              <span>{{ props.res.storeName }}</span>
            </div>
            <nut-icon size="12" name="rect-right"></nut-icon>
          </div>

        </div>
        <slot name="body"></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getPromotion } from '@/components/goods-list/common';
import { colors } from '@/constants/injection-key';
import { unitPrice } from '@/utils/filters';
import { emit } from 'process';
const props = defineProps<{
  res: any,
  disabled?: boolean // 如果禁用状态 不可点击
  type?: string
}>()
// 定义emit
const emit = defineEmits(['click'])

</script>

<style scoped>
.wes {
  /* 多出部分用省略号表示 , 用于一行 */
  overflow: hidden;
  word-wrap: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
